import React, { useEffect, useState } from 'react';
import {
  Radio,
  Form,
  Input,
  Button,
  Modal,
  InputNumber,
  Row,
  Col,
  Image,
  Switch,
  Divider,
} from 'antd';
import { connect } from 'dva';
import { SearchOutlined } from '@ant-design/icons';

import styles from './index.less';

const Index = ({ data, dispatch }) => {
  const [declare, setdeclare] = useState([]);
  useEffect(() => {
    getConfig();
  }, []);
  const getImg = index => {
    return [
      require('@/images/pic6.png'),
      require('@/images/pic7.png'),
      require('@/images/pic8.png'),
    ][index % 3];
  };

  const getConfig = () => {
    dispatch({
      type: '$request/post',
      payload: {
        url: '/api/config/v1/getReportConfigItemList',
      },
    }).then(res => {
      setdeclare(res);
    });
  };
  /**
   * 修改申报设置
   * @param data
   */
  const changeDeclare = data => {
    data.value = !data.value;
    dispatch({
      type: '$request/post',
      payload: {
        url: '/api/config/v1/updateConfigItem',
        data: {
          configItemList: [data],
        },
      },
    }).then(res => {
      getConfig();
      dispatch({ type: 'base/approveSetting' });
    });
  };
  return (
    <div className={styles.container}>
      <Row justify="center">
        {declare &&
          declare.map((item, index) => (
            <Col
              span="7"
              style={{
                display: 'flex',
                alignItems: 'center',
                flexDirection: 'column',
              }}
              key={index}
            >
              <Row>
                <Image src={getImg(index)}></Image>
              </Row>
              <Switch
                checkedChildren="开启"
                unCheckedChildren="关闭"
                checked={item.value}
                style={{ marginTop: 20 }}
                onChange={() => changeDeclare(item)}
              />
              <Row style={{ marginTop: 12 }}>{item.name}</Row>
            </Col>
          ))}
      </Row>
    </div>
  );
};
export default connect(state => state['base'])(Index);
